<template>
  <!-- 表1 毕业⽣去向分布情况 表格改扇形 按钮区分本科硕博总体 -->
  <div class="chart-box">
    <div
      id="chart-4"
      style="min-width: 270px; height: 400px; margin: 0 auto"
    ></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      data: [],
      start: null,
      end: null,
      chart: null,
    };
  },
  created() {
    this.axios({
      url: "grad/yearList",
      methods: "get",
    }).then((res) => {
      let years = res.data.data;

      years = years.sort(function (a, b) {
        return a - b;
      });

      //默认为最近一年
      this.start = years[years.length - 1];
      this.end = years[years.length - 1];

      this.initData();
    });
  },
  mounted() {
  },
  methods: {
    count_kind(data) {
      let beijing = 0;
      let hubei = 0;
      let guangdong = 0;
      let zhejiang = 0;
      let henan = 0;
      let hunan = 0;
      let chongqin = 0;
      let anhui = 0;
      let sichuan = 0;
      let shandong = 0;
      let jilin = 0;
      let fujian = 0;
      let jiangxi = 0;
      let jiangsu = 0;
      let shanghai = 0;
      let guangxi = 0;
      let hainan = 0;
      let shanxi = 0;
      let hebei = 0;
      let heilongjiang = 0;
      let liaoning = 0;
      let yunnan = 0;
      let tianjin = 0;
      let shan_xi = 0;
      let gansu = 0;
      let neimenggu = 0;
      let taiwan = 0;
      let aomen = 0;
      let xianggang = 0;
      let guizhou = 0;
      let xizang = 0;
      let qinghai = 0;
      let xinjiang = 0;
      let ningxia = 0;
      let sum = 0;
      for (let i in data) {
        let cur = data[i]["term"];
        let num = data[i]["num"];
        if (cur == "北京") {
          beijing += num;
        } else if (cur == "湖北") {
          hubei += num;
        } else if (cur == "广东") {
          guangdong += num;
        } else if (cur == "浙江") {
          zhejiang += num;
        } else if (cur == "河南") {
          henan += num;
        } else if (cur == "湖南") {
          hunan += num;
        } else if (cur == "重庆") {
          chongqin += num;
        } else if (cur == "安徽") {
          anhui += num;
        } else if (cur == "四川") {
          sichuan += num;
        } else if (cur == "山东") {
          shandong += num;
        } else if (cur == "吉林") {
          jilin += num;
        } else if (cur == "福建") {
          fujian += num;
        } else if (cur == "江西") {
          jiangxi += num;
        } else if (cur == "江苏") {
          jiangsu += num;
        } else if (cur == "上海") {
          shanghai += num;
        } else if (cur == "⼴⻄") {
          guangxi += num;
        } else if (cur == "海南") {
          hainan += num;
        } else if (cur == "陕西") {
          shanxi += num;
        } else if (cur == "河北") {
          hebei += num;
        } else if (cur == "黑龙江") {
          heilongjiang += num;
        } else if (cur == "辽宁") {
          liaoning += num;
        } else if (cur == "云南") {
          yunnan += num;
        } else if (cur == "天津") {
          tianjin += num;
        } else if (cur == "山西") {
          shan_xi += num;
        } else if (cur == "甘肃") {
          gansu += num;
        } else if (cur == "内蒙古") {
          neimenggu += num;
        } else if (cur == "台湾") {
          taiwan += num;
        } else if (cur == "澳门") {
          aomen += num;
        } else if (cur == "香港") {
          xianggang += num;
        } else if (cur == "贵州") {
          guizhou += num;
        } else if (cur == "西藏") {
          xizang += num;
        } else if (cur == "青海") {
          qinghai += num;
        } else if (cur == "新疆") {
          xinjiang += num;
        } else if (cur == "宁夏") {
          ningxia += num;
        } else {
          // console.log(cur);
        }
        sum += num;
      }
      return [
        beijing,
        hubei,
        guangdong,
        zhejiang,
        henan,

        hunan,
        chongqin,
        anhui,
        sichuan,
        shandong,

        jilin,
        fujian,
        jiangxi,
        jiangsu,
        shanghai,

        guangxi,
        hainan,
        shanxi,
        hebei,
        heilongjiang,

        liaoning,
        yunnan,
        tianjin,
        shan_xi,
        gansu,

        neimenggu,
        taiwan,
        aomen,
        xianggang,
        guizhou,

        xizang,
        qinghai,
        xinjiang,
        ningxia,
      ];
    },
    initData() {
      this.axios({
        url: "grad/org_location",
        method: "get",
        params: {
          start: this.start,
          end: this.end,
        },
      })
        .then((res) => {
          // 调整成输出格式
          let region = [
            "北京",
            "湖北",
            "⼴东",
            "浙江",
            "河南",
            "湖南",
            "重庆",
            "安徽",
            "四川",
            "⼭东",
            "吉林",
            "福建",
            "江⻄",
            "江苏",
            "上海",
            "⼴⻄",
            "海南",
            "陕⻄",
            "河北",
            "⿊⻰江",
            "辽宁",
            "云南",
            "天津",
            "⼭⻄",
            "⽢肃",
            "内蒙古",
            "台湾",
            "澳⻔",
            "⾹港",
            "贵州",
            "⻄藏",
            "⻘海",
            "新疆",
            "宁夏",
          ];
          let bach = this.count_kind(res.data.data.bachelor);
          let master = this.count_kind(res.data.data.master);
          let result = [];
          for (let i = 0; i < region.length; i++) {
            let temp = [];
            if (bach[i] !=0 && master[i]!=0) {
              temp.push(region[i]);
              temp.push(bach[i]);
              temp.push(master[i]);
              result.push(temp);
            }
          }
          result.sort(function (a, b) {
            return b[1] - a[1];
          });
          let chardata = [];
          // 排序取前5个
          chardata.push(["product", "本科⽣", "研究⽣"]);
          for (let i = 0; i < 5; i++) {
            chardata.push(result[i]);
          }
          this.data = chardata;
          this.drawChart();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    drawChart() {
      echarts.init(document.getElementById("chart-4")).dispose();
      this.myChart = echarts.init(document.getElementById("chart-4"));
      let that = this;
      this.myChart.setOption({
        title: {
          text: this.start + "届毕业生就业地域分布情况",
          x: "center",
        },
        legend: {
          bottom: "bottom",
        },

        tooltip: {},
        dataset: {
          source: that.data,
        },
        xAxis: { type: "category" },
        yAxis: {},
        series: [{ type: "bar" }, { type: "bar" }],
      });
    },
    resize() {
      this.myChart.resize(); // 不报错
    },
  },
};
</script>
<style scoped>
.chart-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
  margin-bottom: 10px;
  margin-top: 10px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}
.chart-box :hover {
  cursor: pointer;
}
</style>
